<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	.list{
		background: gray;
		width: 300px;
		margin-bottom: 10px;
		height: 50px;
		line-height: 50px;
		list-style: none
	}

	.box{
		width: 1800px;
		height: 600px;
		/*background: red;*/
		position: relative;
	}
	
	.son{
		width: 800px;
		height: 470px;
		background: #666666;
		position: absolute;
		top: 0px;
		left: 340px;
		display: none;
	}
	</style>

	<script type="text/javascript" src='jquery-1.7.2.js'></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(".list").mouseover(function(){
  		$(".list").css("background-color","yellow");
		});

	--- jQuery functions go here ----

	});
	</script>
</head>
<body>
	<ul class="box">
		<li class="list">全部商品分类<div class="son">1</div></li>
		<li class="list">手机<div class="son">2</div></li>
		<li class="list">智能硬件<div class="son">3</div></li>
		<li class="list">耳机 / 音箱<div class="son">4</div></li>
		<li class="list">路由器 / 移动电源<div class="son">5</div></li>
		<li class="list">保护套 / 后盖 / 贴膜<div class="son">6</div></li>
		<li class="list">数据线 / 电源适配器<div class="son">7</div></li>
		<li class="list">周边配件<div class="son">8</div></li>
	</ul>
</body>
</html>